<template>
  <base-dialog
    class="file-upload-dialog"
    width="15%"
    :show-default-footer="false"
    :visible.sync="openFileModel.visible"
    title="附件上传">
    <!--    v-loading="loading"-->
    <div v-loading="loading">
      <div class="file-operation">
        <div class="file-operation__left" style="width: 100%;">
          <el-form :model="openFileModel" label-width="60px">
            <el-row>
              <el-col :span="18">
                <el-form-item label="附件：" prop="fileName">
                  <el-input v-model="openFileModel.fileName" style="width: 430px; height: 27px;" :disabled="disabledFlag" />
                </el-form-item>
              </el-col>
              <el-col :span="6" style="margin-top: -57px; margin-left: 490px;">
                <upload ref="upload" @on-success="uploadSuccess" />
              </el-col>
            </el-row>
            <div style="width: 545px; color: red;">注意:最大20M,格式为txt,TXT,rar,RAR,jpg,JPG,gif,png,PNG,NMP,jpeg,
              JPEG,doc,DOC,docx,DOCX,xls,XLS,xlsx,XLSX,ppt,PPT,pdf,PDF
            </div>

          </el-form>
          <div align="center" style="width: 675px; margin-top: 10px;">
            <span slot="footer" class="dialog-footer">
              <el-button style="margin-top: 15px;" size="small" type="primary" @click="saveFileFun">保存</el-button>
              <el-button style="margin-top: 15px; margin-left: 15px !important;" size="small" type="primary" @click="openFileModel.visible = false">关闭</el-button>
            </span>
          </div>
        </div>

      </div>
    </div>
  </base-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import Upload from './Upload'
import {
  fileSave
} from '@/api/cms/equipment/divceAttr/1CEquipment'

export default {
  name: 'Files',
  components: { Upload },
  props: {
    openFileModel: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      disabledFlag: true,
      active: 0,
      loading: false,
      allFileList: [],
      uploadUrl: process.env.VUE_APP_BASE_API + '/dfile/file/uploadById/',
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      uploadFiles: [], // 当前上次的文件
      uploadTimes: 0 // 当前上传的数量   控制loading效果
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
    saveFileFun() {
      if (this.openFileModel.filePath === undefined || this.openFileModel.filePath === '') {
        this.notifiyError(`请选择文件`)
        return
      }
      var t = this
      var params = {
        divceId: this.openFileModel.divceId,
        fileTypeId: this.openFileModel.fileTypeId,
        filePath: this.openFileModel.filePath,
        fileName: this.openFileModel.fileName
      }
      fileSave(params).then((response) => {
        this.notifiySuccess('保存成功')
        t.$parent.initPage({ 'id': t.openFileModel.divceId })
        t.openFileModel.visible = false
      }).catch((e) => {
        this.loading = false
      })
    },
    uploadSuccess(response, file) {
      this.$set(this.openFileModel, 'fileName', file.name)
      this.$set(this.openFileModel, 'filePath', response.data)
    },
    beforeUpload(file) {
      this.uploadFiles.push(file)
      this.uploadTimes++
      return true
    },
    uploadProgress(evt, file) {
      console.log(file)
      const idx = this.uploadFiles.findIndex(item => file.uid === item.uid)
      this.uploadFiles.splice(idx, 1, file)
    },
    uploadError(error, file) {
      const idx = this.uploadFiles.findIndex(item => file.uid === item.uid)
      this.uploadFiles.splice(idx, 1)
      this.uploadTimes--
      if (error) {
        this.notifiyError(`${file.name}上传失败`)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.file-operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 10px;
  .el-button + .el-button {
    margin-left: 0 !important;
  }
}

.file-content {
  min-height: 300px;
  max-height: calc(80vh - 170px);
  padding: 10px;
  overflow: auto;
  font-size: 0;
  .file-item {
    position: relative;
    display: inline-block;
    width: 20%;
    padding-bottom: 20%;
    cursor: pointer;
  }
  .file-item__content {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #d9dde4;
    border-radius: 5px;
    box-shadow: 0 0 4px 1px #d9dde4;
    .file-item__img {
      width: 100%;
      vertical-align: middle;
    }
    &::after,
    .file-item__modal::after {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    &:hover .file-item__modal {
      opacity: 1;
    }
    .file-item__modal {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      opacity: 0;
      transition: opacity 0.3s;
      i {
        font-size: 20px;
        color: #fff;
        cursor: pointer;
      }
      .el-icon-delete, .el-icon-download {
        margin-left: 10px;
      }
    }
  }
}

table td {
  //color: white;
  border: 1px solid #c5c5c5;
}
</style>
